import 'package:flutter/material.dart';

class Settlement extends StatefulWidget {
  @override
  State<Settlement> createState() => _SettlementState();
}

class _SettlementState extends State<Settlement> {
  Widget _Content() {
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                child: Text('收货人：2sf'),
              ),
              Container(
                margin: EdgeInsets.only(right: 20),
                child: Text('1777777777'),
              )
            ],
          ),
          Container(
            padding: EdgeInsets.only(bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: 300,
                  child: Wrap(
                    children: [
                      Text(
                        '详细收货地址详细收货地址详细收货地址详细收货地址详细收货地址详细收货地址详细收货地址',
                        style:
                            TextStyle(color: Color.fromRGBO(102, 102, 102, 1)),
                      ),
                    ],
                  ),
                ),
                Icon(
                  Icons.arrow_forward_ios,
                  color: Color.fromRGBO(102, 102, 102, 1),
                  size: 15,
                )
              ],
            ),
            margin: EdgeInsets.only(top: 15),
          ),
          Column(
            children: [goodsItem(), goodsInfo()],
          )
        ],
      ),
    );
  }

//商品
  Widget goodsItem() {
    bool _footDataFlag = true;
    return StatefulBuilder(
      builder: (BuildContext context, setState) {
        return Container(
          padding: EdgeInsets.only(bottom: 30),
          decoration: BoxDecoration(
              border:
                  Border(bottom: BorderSide(color: Colors.grey, width: 0.3))),
          child: Column(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: 76,
                    height: 76,
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                        '左脚',
                        style: TextStyle(color: Colors.white, fontSize: 8),
                      ),
                      width: 45,
                      height: 15,
                      color: Colors.black,
                    ),
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage('images/home/good.png'))),
                  ),
                  Expanded(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          height: 76,
                          margin: EdgeInsets.only(left: 15),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Container(
                                    child: Text('标题'),
                                  ),
                                  Row(
                                    children: [
                                      Container(
                                        child: Text(
                                          '款号：M421',
                                          style: TextStyle(
                                              color: Color.fromRGBO(
                                                  153, 153, 153, 1),
                                              fontSize: 10),
                                        ),
                                      ),
                                      Container(
                                        child: Text(
                                          '尺码：55',
                                          style: TextStyle(
                                              color: Color.fromRGBO(
                                                  153, 153, 153, 1),
                                              fontSize: 10),
                                        ),
                                      )
                                    ],
                                  ),
                                ],
                              ),
                              Row(
                                children: [
                                  Container(
                                    margin: EdgeInsets.only(right: 15),
                                    child: Text(
                                      '￥457',
                                      style: TextStyle(
                                          fontSize: 17,
                                          fontWeight: FontWeight.bold),
                                    ),
                                  ),
                                  GestureDetector(
                                    onTap: () {
                                      setState(() =>
                                          {_footDataFlag = !_footDataFlag});
                                    },
                                    child: Row(
                                      children: [
                                        Container(
                                          child: Text(
                                            '更多',
                                            style: TextStyle(color: Colors.red),
                                          ),
                                        ),
                                        Icon(
                                          Icons.keyboard_arrow_down_outlined,
                                          color: Colors.red,
                                        )
                                      ],
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                        ),
                        Container(
                          child: Text('x1'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              if (_footDataFlag) goodsExtend()
            ],
          ),
        );
        ;
      },
    );
  }

//商品扩展
  Widget goodsExtend() {
    return Container(
      child: Column(
        children: [
          Container(
            margin: EdgeInsets.only(top: 10),
            decoration: BoxDecoration(
                border:
                    Border(bottom: BorderSide(color: Colors.grey, width: 0.3))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Container(
                      color: Colors.black,
                      width: 3,
                      height: 20,
                    ),
                    Container(
                      padding: EdgeInsets.only(left: 10),
                      child: Text(
                        '定制信息',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(primary: Colors.red),
                    onPressed: () {},
                    child: Row(
                      children: [
                        Container(
                          child: Icon(
                            Icons.refresh_outlined,
                            color: Colors.white,
                          ),
                        ),
                        Container(
                          child: Text(
                            '更新设计',
                            style: TextStyle(color: Colors.white),
                          ),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
          Container(
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.only(top: 10, bottom: 10),
                  decoration: BoxDecoration(
                      border: Border(
                          bottom: BorderSide(color: Colors.grey, width: 0.3))),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Container(
                            child: Image.asset(
                              'images/detail/foot.png',
                              width: 10,
                              height: 15,
                              fit: BoxFit.cover,
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(left: 3),
                            child: Text('左脚'),
                          )
                        ],
                      ),
                      SizedBox(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                              child: Text('部件：鞋面'),
                            ),
                            Container(child: Text('材质：网布')),
                            Container(child: Text('颜色：红色')),
                          ],
                        ),
                        width: 300,
                        height: 30,
                      )
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(top: 10, bottom: 10),
                  decoration: BoxDecoration(
                      border: Border(
                          bottom: BorderSide(color: Colors.grey, width: 0.3))),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Container(
                            child: Image.asset(
                              'images/detail/foot.png',
                              width: 10,
                              height: 15,
                              fit: BoxFit.cover,
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(left: 3),
                            child: Text('右脚'),
                          )
                        ],
                      ),
                      SizedBox(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                              child: Text('部件：鞋面'),
                            ),
                            Container(child: Text('材质：网布')),
                            Container(child: Text('颜色：红色')),
                          ],
                        ),
                        width: 300,
                        height: 30,
                      )
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(top: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Container(
                            child: Text('刺绣信息'),
                          )
                        ],
                      ),
                      SizedBox(
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Container(
                                  child: Text('区域：左脚'),
                                ),
                                Container(child: Text('字体：黑体')),
                                Container(child: Text('文字：红色')),
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Container(
                                  child: Text('区域：右脚'),
                                ),
                                Container(child: Text('字体：黑体')),
                                Container(child: Text('颜色：黑色')),
                              ],
                            ),
                          ],
                        ),
                        width: 300,
                        height: 50,
                      )
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

//商品价格等信息

  Widget goodsInfo() {
    TextStyle _textstyle =
        TextStyle(color: Color.fromRGBO(153, 153, 153, 1), fontSize: 13);
    MainAxisAlignment _spaceBetween = MainAxisAlignment.spaceBetween;
    bool codeFalg = true;
    return StatefulBuilder(
      builder: (BuildContext context, setState) {
        return Container(
          height: 194,
          margin: EdgeInsets.only(top: 20),
          child: Column(
            mainAxisAlignment: _spaceBetween,
            children: [
              Row(
                mainAxisAlignment: _spaceBetween,
                children: [
                  Container(
                    child: Text(
                      '商品总额',
                      style: _textstyle,
                    ),
                  ),
                  Container(
                    child: Text(
                      '￥99999',
                      style: _textstyle,
                    ),
                  )
                ],
              ),
              Row(
                mainAxisAlignment: _spaceBetween,
                children: [
                  Container(
                    child: Text(
                      '商品数量',
                      style: _textstyle,
                    ),
                  ),
                  Container(
                    child: Text(
                      '2',
                      style: _textstyle,
                    ),
                  )
                ],
              ),
              Row(
                mainAxisAlignment: _spaceBetween,
                children: [
                  Container(
                    child: Text(
                      '运费',
                      style: _textstyle,
                    ),
                  ),
                  Container(
                    child: Text(
                      '免费',
                      style: _textstyle,
                    ),
                  )
                ],
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    codeFalg = !codeFalg;
                    print(codeFalg);
                  });
                },
                child: Row(
                  mainAxisAlignment: _spaceBetween,
                  children: [
                    Row(
                      children: [
                        Container(
                          child: Text(
                            '优惠码',
                            style: _textstyle,
                          ),
                        ),
                        Container(
                          child: Icon(
                            codeFalg
                                ? Icons.keyboard_arrow_up_outlined
                                : Icons.keyboard_arrow_down_rounded,
                            color: Color.fromRGBO(153, 153, 153, 1),
                          ),
                        ),
                      ],
                    ),
                    Container(
                      child: Text(
                        '￥10.00',
                        style: TextStyle(color: Colors.red),
                      ),
                    )
                  ],
                ),
              ),
              if (codeFalg)
                Row(
                  children: [
                    SizedBox(
                      width: 272,
                      height: 48,
                      child: Container(
                        margin: EdgeInsets.only(right: 10),
                        padding: EdgeInsets.only(left: 10),
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Color.fromRGBO(153, 153, 153, 1),
                                width: 0.5)),
                        child: TextField(
                          decoration: InputDecoration(
                              hintText: '请输入优惠码',
                              border: InputBorder.none,
                              hintStyle: TextStyle(
                                  color: Color.fromRGBO(153, 153, 153, 1))),
                        ),
                      ),
                    ),
                    Expanded(
                        child: SizedBox(
                      height: 48,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            primary: Color.fromRGBO(242, 242, 242, 1)),
                        onPressed: () {},
                        child: Text(
                          '应用',
                          style: TextStyle(
                              color: Color.fromRGBO(153, 153, 153, 1)),
                        ),
                      ),
                    ))
                  ],
                ),
              Row(
                children: [
                  Container(
                    child: Text(
                      '买家留言',
                      style: _textstyle,
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 15, top: 3),
                    child: Text(
                      '6666',
                      style: TextStyle(),
                    ),
                  )
                ],
              )
            ],
          ),
        );
        ;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('结算'),
        elevation: 0,
      ),
      body: Column(
        children: [
          Expanded(
              child: SingleChildScrollView(
            child: _Content(),
          )),
          Container(
            child: Row(
              children: [
                Container(
                  height: 48,
                  alignment: Alignment.center,
                  padding: EdgeInsets.only(right: 15),
                  decoration: BoxDecoration(
                      border: Border(
                    top: BorderSide(color: Colors.grey, width: 0.3),
                  )),
                  width: MediaQuery.of(context).size.width * 0.50,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        child: Text(
                          '共2件',
                          style: TextStyle(
                              color: Color.fromRGBO(153, 153, 153, 1),
                              fontSize: 13),
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Container(
                            child: Text(
                              '合计：',
                              style: TextStyle(
                                  color: Color.fromRGBO(153, 153, 153, 1),
                                  fontSize: 13),
                            ),
                          ),
                          Container(
                            child: Text(
                              '￥555',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    Navigator.pushNamed(context, 'pay');
                  },
                  child: Container(
                    width: MediaQuery.of(context).size.width * 0.50,
                    child: Container(
                      height: 48,
                      alignment: Alignment.center,
                      color: Colors.black,
                      child: Text(
                        '确认结算',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
